<template>
  <div>
    <div class="form-wrap">
      <div class="header">请填写个人信息</div>
      <form bindsubmit="onSubmit">
        <mt-form ref="form" @change="onFormChange">
          <div class="form-item-group">
            <mt-form-item class="form-item" prop="realname">
              <div class="mt-field mt-field--row a-field-input">
                <div class="label">
                  姓
                  <text decode="true">&emsp;&emsp;</text>名
                </div>
                <mt-input placeholder="请输入姓名" :s-model="model.realname"></mt-input>
              </div>
            </mt-form-item>
            <mt-form-item class="form-item" prop="mobile">
              <div class="mt-field mt-field--row a-field-input">
                <div class="label">联系方式</div>
                <mt-input type="number" placeholder="请输入联系方式" :s-model="model.mobile"></mt-input>
              </div>
            </mt-form-item>
            <!-- <mt-form-item class="form-item">
              <div class="mt-field mt-field--row a-field-input a-field-indicator">
                <div class="label">就读院校</div>
                <mt-input  placeholder="请选择就读院校"
                           @tap="onTriggerSchool"
                           disabled="disabled"
                           :s-model="school_name"></mt-input>
              </div>
            </mt-form-item>-->
             <mt-form-item class="form-item" prop="area">
              <div class="mt-field mt-field--row a-field-select a-field-indicator">
                <div class="label">
                  地
                  <text decode="true">&emsp;&emsp;</text>区
                </div>
                <mt-multi-select
                            ref="citySelect"
                  class="a-field-selectcon"
                  columns="{{citys}}"
                  :s-model="model.area"
                >
                  <text slot="initial" class="input-placeholder">
                    <text>请选择入学地区</text>
                  </text>
                </mt-multi-select>
                <!-- <van-popup  position="bottom" show="{{false}}">
                  <van-area area-list="{{ areaList }}" value="110111" />
                </van-popup> -->
              </div>
            </mt-form-item>
            <mt-form-item class="form-item" prop="start_year">
              <div class="mt-field mt-field--row a-field-select a-field-indicator">
                <div class="label">入学年份</div>
                <mt-select
                  class="a-field-selectcon"
                  columns="{{years}}"
                  :s-model="model.start_year"
                >
                  <text slot="initial" class="input-placeholder">请选择入学年份</text>
                </mt-select>
              </div>
            </mt-form-item>
            <mt-form-item class="form-item" prop="school_system">
              <div class="mt-field mt-field--row a-field-select a-field-indicator">
                <div class="label">
                  学
                  <text decode="true">&emsp;&emsp;</text>制
                </div>
                <mt-select
                  class="a-field-selectcon"
                  columns="{{levels}}"
                  :s-model="model.school_system"
                >
                  <text slot="initial" class="input-placeholder">请选择学制</text>
                </mt-select>
              </div>
            </mt-form-item>
            <mt-form-item class="form-item" prop="major">
              <div class="mt-field mt-field--row a-field-input">
                <div class="label">
                  专
                  <text decode="true">&emsp;&emsp;</text>业
                </div>
                <mt-input placeholder="请输入专业" :s-model="model.major"></mt-input>
              </div>
            </mt-form-item>
          </div>
          <div class="btn-group">
            <button
              style="width: 670rpx;"
              disabled="{{disabledForm}}"
              class="a-btn a-btn-primary"
              form-type="submit"
            >下一步</button>
          </div>
        </mt-form>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        mobile: null,
        realname: null,
        school: null,
        area: null,
        start_year: null,
        major: null,
        school_system: null,
        third_year: []
      },
      disabledForm: false,
      school_name: "",
      areaList: $global.area,
    };
  },
  attached() {
    console.log($global.area )
    let self = this;
    let years = [];
    for (let i = 2010; i < 2030; i++) {
      years.push({
        label: i + "年",
        value: i + ""
      });
    }

    self.setData({
      citys: [],
      levels: $global.Variable.trendecyLevelsOptions(),
      years: years,
      thirdYears: [years, years, years]
    });

    self.$staticRefs.form.setDescriptor({
      realname: $global.Utils.Regexp.strRequired("姓名"),
      mobile: $global.Utils.Regexp.mobile("联系方式"),
      area: $global.Utils.Regexp.required("array", "就读区域"),
      school: $global.Utils.Regexp.required("string", "就读院校"),
      start_year: $global.Utils.Regexp.required("string", "入学年份"),
      school_system: $global.Utils.Regexp.required("number", "学制"),
      major: $global.Utils.Regexp.required("string", "专业")
    });

    self.$native.emit("ready", {
      context: self
    });
  },
  methods: {
    init(ext, onSuccess, options = {}) {
      let self = this;
      app
        .getProvinceCity(false, {
          customProvince(province) {
            province.label = province.name;
            province.value = province.name;
            province.$$key = $global.Utils._.guid();
          },
          customCity(city) {
            city.label = city.name;
            city.value = city.name;
            city.$$key = $global.Utils._.guid();
            city.children = [
              {
                label: city.name + "1",
                value: city.name + "1",
                $$key: $global.Utils._.guid()
              },
              {
                label: city.name + "2",
                value: city.name + "2",
                $$key: $global.Utils._.guid()
              }
            ];
          }
        })
        .then(citys => {
          console.log("citys", citys);
          self.setData(
            {
              citys: citys
            },
            () => {
              // self.doHuitian(ext, citys)
              let d = {
                model: {
                  area: [
                    citys[0].value,
                    citys[0].children[0].value,
                    citys[0].children[0].children[0].value
                  ],
                }
              }
              self.setData(d, () => {
                self.$staticRefs.citySelect.initInner(d.model.area)
              })
            }
          );
        });
    },
    doHuitian(ext, citys, options) {
      let self = this;
      let d = {
        model: {
          realname: "lbc",
          mobile: "15195772116",
          area: [
            citys[0].value,
            citys[0].children[1].value,
            citys[0].children[1].children[1].value
          ],
          school: "sdddd",
          start_year: "2017",
          school_system: 3,
          major: "超级",
          third_year: ["2010", "2013", "2014"],
          ...ext
        }
      };
      d.school_name = d.model.school;
      self.setData(d);
      self.$staticRefs.form.setValue(d.model);
      self.$staticRefs.citySelect.renderLabel(d.model.area)
      setTimeout(() => {
        self.validForm();
      }, 0);
      console.log("init", d);
    },
    onFormChange() {
      wx.nextTick(() => {
        this.validForm();
      });
    },
    validForm(onSuccess, onError) {
      this.$staticRefs.form.validate(errors => {
        // console.log(fields)
        if (errors) {
          console.log("errors", errors);
          onError && onError(errors);
          this.setData({
            disabledForm: false
          });
          return;
        }

        this.setData(
          {
            disabledForm: false
          },
          () => {
            onSuccess && onSuccess();
          }
        );
      });
    },
    setSchool(school, trigger) {
      console.log("school", school, trigger);
      this.setData(
        {
          [`${trigger}_name`]: school ? school.name : "",
          [`model.${trigger}`]: school ? school.name : ""
        },
        () => {
          this.validForm();
        }
      );
    },
    getFormData() {
      let d = this.$staticRefs.form.getParsedValue();
      if (Array.isArray(d.area)) {
        d.area = d.area.join("-");
      }
      return d;
    },
    onSubmit(e) {
      let self = this;
      this.validForm(
        () => {
          console.log("valid success", self.data.model);
          setTimeout(() => {
            self.$native.emit("success");
          }, 300);
        },
        errors => {
          console.log("errors[0]", errors[0]);
          if (errors[0] && errors[0].message) {
            app.showToast(errors[0].message.replace("Error: ", ""));
          }
        }
      );
    }
  },
  handles: {
    onTriggerSchool(e) {
      console.log("onTriggerSchool", this);
      this.$routePage("select-school?trigger=school");
    }
  }
};
</script>

<style lang="less">
@import "../../app.component.less";

.form-wrap {
  padding-top: 47pt;
}

.header {
  color: #222222;
  font-size: 36pt;
  line-height: 50pt;
  margin-bottom: 42pt;
  padding-left: 40pt;
}

.form-item-group {
  padding-left: 40pt;
  box-sizing: border-box;
  margin-bottom: 68pt;
}

.form-item {
  display: block;
  border-bottom: 1px solid #efefef;
  padding: 30pt 0 27pt 0;
  &:first-child {
    padding-top: 0;
  }
}

.label {
  width: 192pt;
  color: #222222;
  font-size: 28pt;
}

.btn-group {
  padding-left: 40pt;
  padding-right: 40pt;
  box-sizing: border-box;
}
</style>
